<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isReplaceModal"
      :title="replaceModalModalTitle"
      class-name="vertical-center-modal"
      width="45%"
    )
      .overflow-y-scroll(:class="modalKey != 'createModal' && modalKey != 'editModal' ? 'has-disabled' : ''")
        Form.ivu-row.has-rules-item2.ivu-form-basic(ref="formData" :model="formData" :rules="setRules" :label-width="120")
          FormItem.form-item.ivu-col(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop" v-show="item.isShow")
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="modalKey != 'createModal' ? '未填写' : item.placeholder" :disabled="item.isDisabled" clearable)
            //- template(v-if="item.type === 'select'")
            //-   Select(v-if="item.fn" v-model="formData[item.model]" :placeholder="modalKey != 'createModal' ? '未填写' : item.placeholder" filterable :disabled="item.isDisabled || (item.separateControl && !arrListDown[item.options].length)" label-in-value :multiple="item.multiple" :max-tag-count="item.multiple ? 1 : 0" @on-change="(event, type) => listenCall(item.fn, item.model, event)")
            //-     Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
            //-   Select(v-else v-model="formData[item.model]" :placeholder="modalKey != 'createModal' ? '未填写' : item.placeholder" filterable :disabled="item.isDisabled || !arrListDown[item.options].length" :multiple="item.multiple" :max-tag-count="item.multiple ? 1 : 0")
            //-     Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
            //- template(v-if="item.type === 'datePicker'")
            //-   DatePicker.w-100(v-if="item.fn" :clearable="false" v-model="formData[item.model]" :placeholder="modalKey != 'createModal' ? '未填写' : item.placeholder" :type="item.mode ? item.mode : 'date'" :disabled="item.isDisabled" @on-change="(event, type) => listenCall(item.fn, item.model, event)")
            //-   DatePicker.w-100(v-else :clearable="false" v-model="formData[item.model]" :placeholder="modalKey != 'createModal' ? '未填写' : item.placeholder" :type="item.mode ? item.mode : 'date'" :disabled="item.isDisabled")
            //- template(v-if="item.type === 'switch'")
            //-   i-switch(v-model="formData[item.model]")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(v-show="!(modalKey == 'lookModal')" type="primary" @click="handleSubmit" :loading="!isCanSubmit") 保存

</template>

<script>
import { Common } from '@/utils/common.js'
import _cloneDeep from 'clone-deep'
import { FinanceApi } from '@/api/Finance.api.js'
import { FinanceInvoiceApi } from '@/api/FinanceInvoice.api.js'
import { InvoiceApplyThead } from '../tableHead'

export default {
  name: 'InvoiceApplyModal',

  watch: {
  },

  computed: {
    setFormItem () {
        this.formItem.map(item => {
            if (['returnReason', 'redInvoiceNo'].indexOf(item.model) !== -1) {
                item.isDisabled = false
                item.style = 'ivu-col-span-12 is-required'
            } else {
                item.isDisabled = true
                item.style = 'ivu-col-span-12 remove-required'
            }
            if (['redInvoiceNo'].indexOf(item.model) !== -1) {
                item.isShow = false
            } else {
                item.isShow = true
            }
        })
        return this.formItem
    },

    setRules () {
      return this.rulesReplace
    }
  },

  data () {
    return {
      isReplaceModal: false,
      // isCreate: true,
      isThisMonth: true,
      modalKey: 'createModal',
      replaceModalModalTitle: null,
      isCanSubmit: true,
      formData: {
        invoiceID: '',
        returnReason: null,
      },
      formItem: [
        { type: 'input', label: '退换票原因：', placeholder: '请输入退换票原因', prop: 'returnReason', model: 'returnReason', style: 'ivu-col-span-8 is-required', isShow: false },
      ],
      rulesReplace: {
        returnReason: [
          { required: true, message: '请输入退换票原因', trigger: 'blur' }
        ]
      },
      
    }
  },

  mounted () {
  },

  methods: {

    cancel () {
      this.isReplaceModal = false
    },

    show () {
      this.isCanSubmit = true
      this.isReplaceModal = true
      this.$refs.formData.resetFields({})
    },

    // 提交表单
    handleSubmit (e) {
        let params = this.formData
        this.isCanSubmit = false
        FinanceInvoiceApi.applyBackInvoice(params).then(resp=>{
        console.log('新建-提交表单 resp:', resp)
        if (resp.data.success) {
            this.$Message.success(resp.data.message)
            this.cancel()
            this.$emit('query')
        } else {
            this.isCanSubmit = true
            this.$Message.error(resp.data.message)
        }
        })
    },
  }
}
</script>

<style lang="less" scoped>

</style>
